import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import {MessageBox, Message } from 'element-ui' //在js文件中，需单独引入提示
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    redirect:"welcome",
    children:[
      {
        path:"/welcome",
        name:"welcome",
        component:()=>import("../views/index/welcome.vue")
      },
    //   {
    //     path:"/users",
    //     name:"users",
    //     component:()=>import("../views/index/users.vue")
    //   },
    //   {
    //     path:"/rights",
    //     name:"rights",
    //     component:()=>import("../views/index/rights.vue")
    //   },
    //   {
    //     path:"/categories",
    //     name:"categories",
    //     component:()=>import("../views/index/categories.vue")
    //   },
    //   {
    //     path:"/goods",
    //     name:"goods",
    //     meta: { hidden: true, threeMenu: true,leaf:true},
    //     component:()=>import("../views/index/goods.vue"),
    //     children:[

        ]
    //   },
    //   {
    //     path:"/goods/add",
    //     name:"add",
    //     component:()=>import("../views/index/ll/add.vue")
    //   },
    //   {
    //     path:"/orders",
    //     name:"orders",
    //     component:()=>import("../views/index/orders.vue")
    //   },
    //   {
    //     path:"/reports",
    //     name:"reports",
    //     component:()=>import("../views/index/reports.vue")
    //   },
    //   {
    //     path:"/rights",
    //     name:"rights",
    //     component:()=>import("../views/index/rights.vue")
    //   },
    //   {
    //     path:"/upload",
    //     name:"upload",
    //     component:()=>import("../views/index/upload.vue")
    //   },
    //   {
    //     path:"/roles",
    //     name:"roles",
    //     component:()=>import("../views/index/roles.vue")
    //   },
    //   {
    //     path:"/params",
    //     name:"params",
    //     component:()=>import("../views/index/params.vue")
    //   },
    // ]
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/loginName',
    name: 'loginName',
    component: () => import('../views/loginName.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/test.vue')
  },
    // //找不到页面到都到login
    // {
    //   path: '*',
    //   redirect: '/login'
    //  }
]

const router = new VueRouter({
  // mode: 'history',
  // base: process.env.BASE_URL,
  routes
})

import {fn} from "@/utils/index"
console.log("路由先走");
function loadRoute(){
  let token=localStorage.getItem("token")
  let menu=JSON.parse(localStorage.getItem("menuList"))
  console.log(menu,"menu");
  if(token && menu){
    let newList=fn(menu)
    console.log('路由表结构',newList);
    newList.forEach(item => {
      router.addRoute("home", item)
  })
  }
}
loadRoute()

// const whiteList =[ '/login','/test']
router.beforeEach((to,from,next)=>{
  // console.log(to)
  let token=localStorage.getItem("token")
  if(token){
     next()
  }else{
    // if (whiteList.indexOf(to.path) != -1) {
      if(to.path=="/loginName"){
      next()
    }
    else {
      MessageBox.confirm('token不存在是否跳转登录页?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        next('/loginName')
      }).catch(() => {
             console.log(11)
      })
      
    }
  }
})


export default router


/* 
一.动态路由如何实现？
1.在后台管理系统当中，我们的路由表一般分为 静态路由和动态路由。静态路由是在前台写死的,而动态路由是通过前端写js把树状结构转成列表结构动态填加进去的。
2.动态路由具体实现,在路由表里把那些常规路由(不需要权限的路由，事先都写到路由表里)。把需要权限的路由通过router.addRoute()动态填加到对应的子路由里 。
3.动态填加的路由需要处理下，因为后端传给你的是树状结构，前端需要把树结构处理成列表结构(通过递归，不断的获取路径,名字那些信息)，填加到路由表里。 

静态路由与动态路由优缺点-1.在中大型项目，采用的都是动态路由方式,因为后台导航目录运营人员可能会新增菜单,新增菜单后，前端人员得在路由表填加上，这样导航才能点击才能对应上页面,这样比较麻烦。如果是动态路由，运营人员新增目录后，因为我是动态路由获取永远是最新的路径，一次性通过动态填加的方式加进去,后边就不用管路由的事了,只关心页面就可以了。

二.动态路由实现常见问题
 1.第一次登录进去后,点击导航找不到路由问题?原因是路由表里还没有生成路由，因为生成动态路由的条件是必须登录后才能生成，而路由是最先执行，但是登录还没运行，造成找不到路由。解决办法：可在登录的时候在请求一次动态路由

 2.登录后跳转其它页面,如果刷新，页面找不到问题？原因是路由是动态的，它是在登录后生成的，而其它页面没有在次生成动态路由,所以就找不到。解决办法：可在路由里，在生成一遍动态路由。这样不管在后台哪个页面，一刷新都会先执行。

 以上两种方法要结合到一起。
 还有一种解决办法：就是把生成动态路由的方法，放到路由守卫里，只写一次也可以,因为路由守卫每次只要有路由都会执行。

*/